<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>三栏自适应</title>
	<style type="text/css">
		html,body{
			margin: 5px 0;
			height: 100%;
		}
		#container{
			width: 90%;
			margin: 0px auto;
			border: 1px solid black;
			height: 100%;
			position: relative;
		}
/*=====第一种方法，绝对定位法=====*/
		/*#left,#right{
			position: absolute;
			width: 200px;
			top: 0;
			height: 100%;
		}
		#left{
			left: 0;
			background-color: #eeddbb;
		}
		#right{
			right: 0;
			background-color: #dddddd;
		}
		#main{
			margin:0px 210px;
			background-color: green;
			height: 100%;
		}*/
/*=====第二种方法，浮动法=====*/
		#left,#right{
			width: 200px;
			height: 100%;
		}
		#left{
			float: left;
			background-color: red;
		}
		#right{
			float: right;
			background-color: blue;
		}
		#main{
			margin: 0 210px;
			height: 100%;
		}
	</style>
</head>
<body>
	<div id="container">		
		<div id="left"></div>	
		<div id="right"></div>
		<div id="main"></div>
	</div>
	
</body>
</html>